<template>
  <div class="cart-wrapper">
    <div class="container">
      <el-breadcrumb separator=">" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>购物车</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="shopping-list">
        <el-table :data="shoppingCartAllList" style="width: 100%">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="全选" width="55" />
          <el-table-column label="商品信息">
            <template #default="scope">
              <div class="goods-info">
                <div class="goods-img">
                  <img :src="scope.row.picture" alt="">
                </div>
                <div class="goods-name">
                  <div>{{ scope.row.name }}</div>
                  <el-popover
                    placement="bottom-start"
                    trigger="click"
                    width="400px"
                  >
                    <template #reference>
                      <div>
                        {{ scope.row.attrsText }}
                      </div>
                    </template>
                    <div class="goods-sku" v-for="(spec, i) in goodsDetails.specs" :key="i">
                      <div class="spec-name">{{ spec.name }}</div>
                      <div class="box"><!-- todo 1 -->
                        <div v-for="(d, j) in spec.values" :key="j" :class="spec.disabled[j] ? 'click-pass' : 'click-ban'"
                             @click="spec.disabled[j] ? onChangePrice(spec, d, i) : ''">
                          <div :class="specChecked[i]?.valueName !== d.name ? 'goods-sku-num' : 'goods-sku-num border'"
                               v-if="d.picture === null" :title="d.name">{{ d.name }}</div>
                          <div v-else :class="specChecked[i]?.valueName !== d.name ? 'goods-sku-img' : 'goods-sku-img color'">
                            <img :src="d.picture" alt="" :title="d.name">
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单价" width="220" align="center">
            <template #default="scope">￥{{ scope.row.price }}</template>
          </el-table-column>
          <el-table-column label="数量" width="180" align="center">
            <template #default="scope">
              <el-input-number v-model="scope.row.count"/>
            </template>
          </el-table-column>
          <el-table-column label="小计" width="180">
            <template #default="scope">
              <div class="good-total-price">￥{{ scope.row.price * scope.row.count }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140">
            <div>移入收藏夹</div>
            <div class="del">删除</div>
            <div>找相似</div>
          </el-table-column>
        </el-table>
      </div>
      <div class="effective">
        <div class="left">
          <el-checkbox v-model="checked1" label="全选" size="large" />
          <span>删除商品</span>
          <span>移入收藏夹</span>
          <span>清空失效商品</span>
        </div>
        <div>
          <span>共{{ getGoodsCount(shoppingCartAllList) }}件商品， 已选择共{{ getGoodsCount(shoppingCartAllList) }}件，商品合计：
            <span class="total-price">￥{{ getGoodsTotalPrice(shoppingCartAllList) }}</span>
          </span>
          <button class="btn">下单结算</button>
        </div>
      </div>
      <div class="like">
        <div class="goods-relevant">
          <div class="header">猜你喜欢</div>
          <div class="carousel" >
            <el-carousel
              indicator-position="outside"
              :autoplay="false"
              arrow="always"
              trigger="click"
            >
              <el-carousel-item v-for="item in goodsRelevant" :key="item.id">
                <div class="carousel-card">
                  <div v-for="sub in item" :key="sub.id" class="carousel-card-item" @click="onGoDetail(sub.id)">
                    <div>
                      <img :src="sub.picture" alt="">
                    </div>
                    <div class="carousel-card-name">{{ sub.name }}</div>
                    <div class="carousel-card-price">￥{{ sub.price }}</div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>

        </div>
      </div>
      <div class="emp"></div>
    </div>

  </div>

</template>
<script setup>
import { useStore } from 'vuex';
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const store = useStore();
const router = useRouter();
const route = useRoute();
store.dispatch('home/resetShoppingCartList');
const shoppingCartAllList = computed(() => store.state.home.shoppingCartList);
const num = ref(1);
// 同类商品推荐
// const goodsRelevant = ref([]);
store.dispatch('goods/updateGoodsRelevant', route.params.id);
const goodsRelevant = store.getters['goods/goodsRelevantGroup'];
const count = ref(0);
// 获取商品件数
function getGoodsCount(data) {
  return data.reduce((p, v) => p + v.count, 0);
}
// 获取购物车总金额
function getGoodsTotalPrice(data) {
  return data.reduce((p, v) => p + v.price * v.count, 0);
}
const popoverRef = ref();
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.();
};
// start
// 商品详情
const goodsDetails = ref({ categories: [] });

// 默认图片
const defaultImg = ref();
const hotRank = ref([]);
const weekRank = ref([]);
const skusId = ref('');
const specChecked = ref([]);
function onChangeNum(val) {
  num.value = val;
}
function onUpdateCart(num, id) {
  store.dispatch('home/updateCartList', {
    count: num,
    skuId: id,
  });
}


</script>
<style lang="scss" scoped>
.cart-wrapper{
  background: #f5f5f5;
  .container{
    width: 1240px;
    margin: 0 auto;
    .breadcrumb{
      padding: 25px 10px;
    }
    .shopping-list{
      width: 1240px;
      .goods-info{
        display: flex;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
        .goods-img{
          width: 100px;
          height: 100px;
          img{
            width: 100px;
            height: 100px;
          }
        }
        .goods-name{
          width: 280px;
          height: 62px;
          padding-left: 10px;
          & div:first-child{
              width: 270px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #666;
            }
          & div:nth-child(2){
            display: inline-block;
            max-width: 230px;
            padding: 0 6px;
            border: 1px solid #ccc;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #999;
          }

        }
        // start
        .goods-spec{
        flex: 1;
        padding: 30px 30px 30px 0;
        box-sizing: border-box;
        .goods-sku-img{
          height: 50px;
          width: 50px;
          border: 1px solid #e4e4e4;
          margin: 0  6px 6px 0;  // todo 3  // 1次修改
          img{
            height: 50px;
            width: 50px;
          }
        }
        :deep(.el-form-item){
          margin-top: 16px;
          margin-left: 10px;
        }
        :deep(.el-form-item__label){
          padding: 0 16px 0 0 ;
        }
        :deep(.el-radio__input){
          display: none;
        }

        .goods-spec-name{
          font-size: 22px;
          margin: 0;
          padding-bottom: 10px;
        }
        .goods-spec-desc{
          font-size: 14px;
          color: #999;
          margin: 0;
          padding-bottom: 10px;
        }
        .goods-spec-price{
          margin: 0;
          padding-bottom: 10px;
          & span:nth-child(1){
            font-size: 22px;
            color: #cf4444;
            margin-right: 10px;
          }
          & span:nth-child(2){
            color: #999;
            text-decoration: line-through;
          }


        }
        .goods-serve{
          width: 500px;
          padding: 20px 10px 0;
          background: #f5f5f5;
          div{
            padding-bottom: 10px;
            :deep(.el-select){
              padding: 0;
              line-height: 0;
            }
            & span:nth-child(1){
              color: #999;
              font-size: 14px;
              margin-right: 16px;
            }
            & span:nth-child(2){
              color: #666;
              font-size: 14px;
            }
            span .point{
              color: #27ba9b;
              margin: 0;
            }
            .serve-color{
              color: #666;
              font-size: 14px;
              padding-left: 8px;
            }
            .serve-color-more{
              color: #27ba9b;
              font-size: 14px;
              padding-left: 8px;
            }
          }
        }
        .goods-sku{
          display: flex;
          padding: 20px 0 0 10px;
          align-items: center;
          .spec-name{
            width: 50px;
            font-size: 14px;
            color: #999;
          }
          .box{
            display: flex;
            flex-wrap: wrap;
            .goods-sku-num{
              border: 1px solid #e4e4e4;
              color: #666;
              height: 30px;
              line-height: 30px;
              text-align: center;
              padding: 0 20px;
              font-size: 14px;
              margin: 0  6px 6px 0;
            }
            .border{
              border: 1px solid #27ba9b;
            }
            .color{
              border: 1px solid #27ba9b;
            }
          }
        }
        .goods-num{
          display: flex;
          padding: 20px 0 0 10px;
          & div:nth-child(1){
            width: 50px;
            line-height: 30px;
            color: #999;
            font-size: 14px;
          }
        }
        .goods-btn{
          margin-top: 20px;
          button{
            width: 180px;
            height: 50px;
            padding: 1px 6px;
            background: #27ba9b;
            border: none;
            color: #fff;
            border-radius: 4px;
            font-size: 18px;
          }
        }
      }
        // end
      }
      .good-total-price{
        color: #cf4444;
        font-size: 18px;
      }
      .del{
        color: #27ba9b;
      }

    }
    .effective{
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      background: #fff;
      padding: 0 30px;
      height: 80px;
      line-height: 80px;
      .total-price{
        font-size: 18px;
        font-weight: 700;
        color: #cf4444;
      }
      .left{
        span{
          margin-left: 20px;
        }
      }
      .btn{
        margin-left: 20px;
        width: 180px;
        padding: 0 6px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        border: none;
        border-radius: 4px;
        background: #27ba9b;
        color: #fff;
        font-size: 18px;
      }
    }
    .like{
      margin-top: 20px;
      background: #fff;
      height: 460px;
      width: 1240px;
      .header{
        height: 80px;
        line-height: 80px;
        padding: 0 20px;
        font-size: 20px;
      }
      .goods-relevant{
      width: 1240px;
      height: 460px;
      margin-top: 20px;
      background: #fff;
      .header{
        height: 80px;
        line-height: 80px;
        padding: 0 20px;
        font-size: 20px;
      }
      .carousel{
        height: 380px;
        :deep(.el-icon){
          color: #ddd;
          font-size: 36px;
        }
        .carousel-card{
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 0 40px;

          .carousel-card-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 240px;
            height: 290px;
            cursor: pointer;
            img{
              width: 190px;
              height: 190px;
            }
            .carousel-card-name{
              width: 200px;
              box-sizing: border-box;
              padding-top: 16px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .carousel-card-price{
              box-sizing: border-box;
              padding-top: 16px;
              color: #cf4444;
            }
          }
        }
      }
    }
    }
    .emp{
      height: 20px;
    }
  }
}
:deep(.el-carousel__button) {
  display: block;
  opacity: .1;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: #27ba9b;
  cursor: pointer;
}
:deep(.el-carousel__arrow){
  background: transparent;
}
:deep(.el-checkbox.el-checkbox--large .el-checkbox__label){
  font-size: 16px;
}
:deep(.el-popover.el-popper){
  min-width: 400px;
  height: 289px;
}
</style>
